<template>
    <!-- 总容器 -->
    <div class="wrapper">
        <h1>体检预约-登录</h1>
        <section>
            <div class="input-box">
                <i class="fa fa-user-o"></i>
                <input type="text" placeholder="输入手机号" v-model="user.phone">
            </div>
            <div style="display: flex;">
                <div class="input-box" style="width: 40%;">
                <i class="fa fa-envelope"></i>
                <input type="password" placeholder="输入短信验证码" v-model="user.sms">
                </div>
                <div class="email-box" :class="{emailclick: ifclick==1}"  
                    @click="getSms"
                >
                    {{ifclick == 0?sms_text:ifclick == 1?count+"s":sms_resend}}
                </div>
            </div>
            <div class="reg-box">
                <p @click="toLogin">账号密码登录</p>
            </div>
            <div class="button-box" @click="smsLogin">登录
            </div>
        </section>

        <footer>
            <div>
                <div class="line"></div>
                <p>有疑问请联系客服</p>
                <div class="line"></div>
            </div>
            <p>4008-XXX-XXX</p>
        </footer>
    </div>
</template>

<script>
import { reactive, toRefs } from 'vue';
import axios from "axios"
// import router from '../router';
import { useRouter } from 'vue-router';
import { setSessionStorage } from '../common';
import router from '../router';

    export default{

        setup(){

            const router = useRouter()

            const state = reactive({
                user:{
                    phone: "",
                    sms: ""
                },
                ifclick:0,
                count:60,
                sms_text:"点击发送验证码",
                sms_resend:"点击重新发送"
            })
            
            function toLogin(){
                router.push({name:"Login"})
            }

            function getSms(){
                axios.post('/api/smsget', {
                    phone: state.user.phone,
                    })
                    .then(function (response) {
                        console.log(response);
                        //2.对相应结果进行判断
                        if(response.data.status == 200){
                            state.ifclick=1
                            state.count=60
                            countdown()
                        }else if(response.data.status == 201){
                            alert("手机号尚未注册")
                            state.user.phone = ""
                        }else{
                            alert("短信获取失败")
                        }
                    })
                    .catch(function (error) {
                    console.log(error);
                    })
            }

            function smsLogin(){
                axios.post('/api/smslogin', {
                    phone: state.user.phone,
                    sms: state.user.sms
                    })
                    .then(function (response) {
                        console.log(response);
                        //2.对相应结果进行判断
                        if(response.data.status == 200){
                            alert("登录成功!")
                            //将用户数据存储到session
                            setSessionStorage("users",response.data.data)
                            setSessionStorage("token",response.headers.token)
                            console.log(sessionStorage.getItem("users"))
                            console.log(sessionStorage.getItem("token"))
                            router.push({name:"Index"})
                        }else{
                            alert(response.data.desc)
                        }
                    })
                    .catch(function (error) {
                    console.log(error);
                    })
            }

            function countdown(){
                    // 使用setInterval实现每秒减1
                    const timer = setInterval(() => {
                        state.count--; // 每次减1

                        // console.log(state.count); 
                        // 当count减到0时停止倒计时
                        if (state.count <= 0) {
                            clearInterval(timer); // 清除定时器
                            state.ifclick=2
                        }
                    }, 1000); // 1000毫秒 = 1秒
            }

            return{
                ...toRefs(state),
                toLogin,
                getSms,
                smsLogin,
                countdown
            }
        }
    }
</script>

<style scoped>
/*********************** 总容器 ***********************/
.wrapper{
    width: 100%;
    height: 100%;
    background-image: linear-gradient(45deg,#266C9F,#266C9F,#7EB059);
    overflow: hidden;
}

/*********************** 标题部分 ***********************/
h1{
    text-align: center;
    color: #FFF;
    font-size: 9.5vw;
    font-weight: 500;
    margin-top: 13vh;
    margin-bottom: 3vh;
}

/*********************** 内容部分 ***********************/
section{
    width: 86vw;
    margin: 0 auto;
    background-color: #FFF;
    border-radius: 2.4vw;

    box-sizing: border-box;
    padding: 6vw;

}

section .input-box{
    width: 100%;
    height: 12vw;
    border: solid 1px #CCC;
    border-radius: 2vw;
    margin-top: 5vw;

    display: flex;
    align-items: center;
}
section .input-box i{
    margin: 0 3.6vw;
    font-size: 5.4vw;
    color: #CCC;
}
section .input-box input{
    border: none;
    outline: none;
}

section .reg-box{
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 5vw;
    margin-bottom: 2vw;
}
section .reg-box p{
    font-size: 3.3vw;
    color: #2D727E;
    user-select: none;
    cursor: pointer;
}

section .button-box{
    width: 100%;
    height: 13vw;
    border-radius: 2vw;
    background-color: #70B0BC;

    text-align: center;
    line-height: 13vw;
    font-size: 4.6vw;
    color: #FFF;
    letter-spacing: 1vw;

    user-select: none;
    cursor: pointer;
}

section .email-box{

    width: 30%;
    height: 12.2vw;
    border-radius: 2vw;
    background-color: #70B0BC;
    margin-top: 5vw;
    margin-left: 3vw;

    text-align: center;
    line-height: 13vw;
    font-size: 2.4vw;
    color: #FFF;

    user-select: none;
    cursor: pointer;
}

.emailclick{
    background-color:  #7edced;
    pointer-events: none;
    opacity: 0.6; 
}


section .register-box {
    text-align: end;
    font-size: 3vw;
}

section .register-box span{
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.4s;
    color: #2D727E;
}


/*********************** footer部分 ***********************/
footer{
    width: 86vw;
    margin: 0 auto;
    margin-top: 12vw;
    font-size: 3.8vw;
    color: #FFF;
}
footer div{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
footer div .line{
    width: 22vw;
    height: 1px;
    background-color: #FFF;
}
footer > p{
    text-align: center;
    margin-top: 2vw;
}

</style>